<!--<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</body>

</html>-->

<!-- 循环播放的原形进度条 -->
<!--<style>
	.loading {
		margin: 100px auto;
		width: 8em;
		height: 8em;
		position: relative;
	}
	
	.loading .progress {
		position: absolute;
		width: 6em;
		height: 6em;
		background-color: white;
		border-radius: 50%;
		left: 1em;
		top: 1em;
		line-height: 6em;
		text-align: center;
	}
	
	.left,
	.right {
		width: 4em;
		height: 8em;
		overflow: hidden;
		position: relative;
		float: left;
	}
	
	.left {
		border-radius: 8em 0 0 8em;
	}
	
	.right {
		border-radius: 0 8em 8em 0;
	}
	
	.left:after,
	.right:after {
		content: "";
		position: absolute;
		display: block;
		width: 4em;
		height: 8em;
		border-radius: 8em 0 0 8em;
		background-color: #E61874;
	}
	
	.right:after {
		content: "";
		position: absolute;
		display: block;
		border-radius: 0 8em 8em 0;
	}
	
	@-webkit-keyframes rotateB {
		25%,
		50% {
			transform: rotateZ(180deg);
		}
		75%,
		100% {
			transform: rotateZ(360deg);
		}
	}
	
	@-webkit-keyframes rotateA {
		0%,
		25% {
			transform: rotateZ(0deg);
		}
		50%,
		75% {
			transform: rotateZ(180deg);
		}
		100% {
			transform: rotateZ(360deg);
		}
	}
	
	.left:after {
		-webkit-animation: rotateA 5s infinite linear;
		transform-origin: right center;
	}
	
	.right:after {
		-webkit-animation: rotateB 5s infinite linear;
		transform-origin: left center;
	}
</style>
<div class="loading">
	<div class="left"></div>
	<div class="right"></div>
	<div class="progress">85%</div>
</div>-->

<!-- 时钟 -->

<style>
	* {
		margin: 0;
		padding: 0;
	}
	
	.loading {
		margin: 100px auto;
		width: 25em;
		height: 8em;
		position: relative;
	}
	
	.clock {
		position: relative;
		width: 8em;
		height: 8em;
		display: inline-block;
	}
	
	.loading .progress {
		position: absolute;
		width: 6em;
		height: 6em;
		background-color: white;
		border-radius: 50%;
		left: 1em;
		top: 1em;
		line-height: 6em;
		text-align: center;
	}
	
	.progress span {
		font: 50px/2em Arial;
	}
	
	.left,
	.right {
		width: 4em;
		height: 8em;
		overflow: hidden;
		position: relative;
		float: left;
	}
	
	.left {
		border-radius: 8em 0 0 8em;
	}
	
	.right {
		border-radius: 0 8em 8em 0;
	}
	
	.left div,
	.right div {
		content: "";
		position: absolute;
		display: block;
		width: 4em;
		height: 8em;
		background-color: white;
		border-radius: 8em 0 0 8em;
		transition: all .3s;
		transform-origin: right center;
		transform: rotateZ(-180deg);
	}
	
	.right div {
		content: "";
		position: absolute;
		display: block;
		border-radius: 0 8em 8em 0;
		transform-origin: left center;
	}
	
	.clock:nth-child(1) .left div,
	.clock:nth-child(1) .right div {
		background-color: red;
	}
	
	.clock:nth-child(2) .left div,
	.clock:nth-child(2) .right div {
		background-color: green;
	}
	
	.clock:nth-child(3) .left div,
	.clock:nth-child(3) .right div {
		background-color: blue;
	}
</style>
<div class="loading">
	<div class="clock hours">
		<div class="left">
			<div></div>
		</div>
		<div class="right">
			<div></div>
		</div>
		<div class="progress"><span>0</span></div>
	</div>
	<div class="clock minutes">
		<div class="left">
			<div></div>
		</div>
		<div class="right">
			<div></div>
		</div>
		<div class="progress"><span>0</span></div>
	</div>
	<div class="clock seconds">
		<div class="left">
			<div></div>
		</div>
		<div class="right">
			<div></div>
		</div>
		<div class="progress"><span>0</span></div>
	</div>
</div>
<script>
	/*
		  by:王美建 CSS3 时钟
		*/
	setInterval(function() {
		var time = new Date(),
			H = time.getHours(),
			M = time.getMinutes(),
			S = time.getSeconds();
	showHours("hours", H, 12);
		showHours("minutes", M, 30);
		showHours("seconds", S, 30);
	}, 30)

	function showHours(oClass, num, n) {
		var aEle = getByClass(oClass)[0].children,
			Rdeg = num > n ? n : num,
			Ldeg = num > n ? num - n : 0;
		aEle[2].innerHTML = "<span>" + num + "</span>";

		aEle[1].children[0].style.transform = "rotateZ(" + (360 / (2 * n) * Rdeg - 180) + "deg)";
		aEle[0].children[0].style.transform = "rotateZ(" + (360 / (2 * n) * Ldeg - 180) + "deg)";
	}

	function getByClass(oClass) {
		return document.getElementsByClassName(oClass);
	}
</script>